<template>
  <!-- 此页面用于新生面试 -->
  <view>
    <u-navbar :background="background" title="Rococo面试" is-fixed="true" :border-bottom="false" :is-back="false"
      z-index="9999"></u-navbar>
    <image src="https://typora-licodeao.oss-cn-guangzhou.aliyuncs.com/typoraImg/interview.webp" class="img"></image>
    <view class="tip">
      <view class="remind">
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
      </view>
      <view class="content">
        <view class="first">
          <view class="num">1.</view>首先，欢迎各位新同学进入到面试环节。
        </view>
        <view class="second">
          <view class="num">2.</view>你需要<view class="important">点击下方的按钮</view>，方便面试后通过<view class="important">微信</view>
          <view class="empty">告知你的面试结果。</view>
        </view>
        <view class="third">
          <view class="num">3.</view>温馨提示：<view class="important">先登录再订阅</view>哦~
        </view>
      </view>
    </view>
    <view class="loginBtn" @click="login">
      <image src="https://typora-licodeao.oss-cn-guangzhou.aliyuncs.com/typoraImg/login.webp" class="img1"></image>
      <view class="textBox">
        <view class="topText">
          <view class="important">点击这里</view>登录
        </view>
        <view class="bottomText">数据用于处理你的面试信息</view>
      </view>
      <view class="shape"></view>
    </view>
    <view class="subscribeBtn" @click="subscribe">
      <image src="https://typora-licodeao.oss-cn-guangzhou.aliyuncs.com/typoraImg/subscriber.webp" class="img1">
      </image>
      <view class="textBox">
        <view class="topText">
          <view class="important">点击这里</view>订阅
        </view>
        <view class="bottomText">及时推送你的面试结果</view>
      </view>
      <view class="shape2"></view>
    </view>
    <view class="formBox">
      <view class="remind">
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
      </view>
      <view class="finalTip">
        <view class="finalText">
          <view class="xing">*</view>感谢你的订阅，面试结果会尽快推送给<view>你，请注意查看微信消息。</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundColor: '#F8F8F8'
        },
        userInfo: {
          avatarUrl: "",
          nickName: ""
        },
        token: '',
        userInterViewAddVO: {
          major: "",
          name: "",
          openId: "",
          year: ""
        }
      }
    },
    methods: {
      login() {
        let that = this
        wx.getUserProfile({
          desc: '用于通知你的面试结果',
          success(res) {
            that.userInfo.avatarUrl = res.userInfo.avatarUrl
            that.userInfo.nickName = res.userInfo.nickName
            wx.login({
              success(res) {
                if (res.code) {
                  wx.request({
                    url: 'https://www.lingche.net.cn:9223/user/getOpenId',
                    method: 'GET',
                    data: {
                      "code": res.code
                    },
                    header: {
                      "Authorization": uni.getStorageSync('tokenHead') + ' ' + uni.getStorageSync('token')
                    },
                    success(res) {
                      that.userInterViewAddVO.openId = res.data.message
                      if (res.data.code === 200) {
                        uni.showToast({
                          icon: 'success',
                          title: '登录成功',
                          duration: 2000
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        })
      },
      subscribe() {
        if (this.userInterViewAddVO.openId !== "") {
          wx.requestSubscribeMessage({
            tmplIds: ['rwqqPH_gz_LbSWm5TyLKqFHmFgCA0zXzSnG6rvc6d18'],
            success(res) {
              if (res['rwqqPH_gz_LbSWm5TyLKqFHmFgCA0zXzSnG6rvc6d18'] === 'accept') {
                uni.showToast({
                  icon: 'success',
                  title: '订阅成功',
                  duration: 2000
                })
              }
            }
          })
        } else {
          uni.showToast({
            icon: 'error',
            title: '请先登录',
            duration: 1500
          })
        }
      }
    }
  }
</script>

<style>
  page {
    background-color: #F8F8F8;
  }

  .img {
    width: 100%;
    margin: 0 auto;
  }

  .tip {
    width: 90%;
    height: 110px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #E2EDFD;
  }

  .remind {
    width: 90%;
    height: 15px;
    margin: 0 auto;
    padding-top: 6px;
  }

  .i {
    display: inline-block;
    width: 6px;
    height: 6px;
    line-height: 5px;
    background-color: #FF6C85;
    border-radius: 50%;
    margin: 2px;
    float: left;
  }

  .content {
    width: 95%;
    margin: 5px auto;
  }

  .first,
  .second,
  .third {
    text-indent: 1rem;
  }

  .empty {
    margin-left: 17px;
  }

  .num {
    display: inline;
    margin-right: 5px;
    font-weight: bolder;
    color: #F48D87;
  }

  .important {
    display: inline;
    color: #F48D87;
  }

  .loginBtn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    height: 100px;
    margin: 10px auto;
    background-color: #FFFFFF;
    border-radius: 15px;
  }

  .subscribeBtn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    height: 100px;
    margin: 10px auto;
    background-color: #FFFFFF;
    border-radius: 15px;
  }

  .shape {
    width: 20px;
    height: 20px;
    margin-top: 80px;
    background: #ff6b6b;
    border-top-left-radius: 100%;
  }

  .shape2 {
    width: 20px;
    height: 20px;
    margin-top: 80px;
    background: #FFC901;
    border-top-left-radius: 100%;
  }

  .img1 {
    width: 115px;
    height: 100px;
    margin: 10px;
    border-radius: 30px;
  }

  .textBox {
    flex: 1;
    width: 50%;
    margin-left: 20px;
  }

  .topText {
    font-size: 20px;
    color: #242424;
  }

  .bottomText {
    font-size: 12px;
    color: #242424;
  }

  .formBox {
    width: 90%;
    height: 100px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #E2EDFD;
  }

  .xing {
    display: inline;
    color: #F48D87;
    font-size: 20px;
    font-weight: bolder;
  }

  .name {
    width: 90%;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
  }

  .nameStyle {
    line-height: 35px;
    height: 35px;
  }

  .finalTip {
    width: 90%;
    height: 100px;
    margin: 10px auto;
  }

  .formContent {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .btn {
    margin-left: 195px;
  }

  .finalText {
    width: 100%;
    height: 60px;
    margin: 10px auto;
    background-color: #F3F4F4;
    text-indent: 1.5rem;
    border-left: 5px solid #F48D87;
  }
</style>
